<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name='author' content='网站建设：智杰科技'>
  <title></title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link href="css/public.css" rel="stylesheet" type="text/css" />
  <link href="css/news.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <header id="publicNav"></header>
  <div class="main-wrap">
    <h6 class="top-info-box">新闻案例</h6>
    <div class="list-box" id="div_news">
    </div>
    <div class="pagenation">
      <a class="pre-btn fl">
        <i class="iconfont"></i>
        上一页
      </a>
      <div class="num-box fl">
        <span id="currentPage">1</span>/<span id="totalPage"></span>
        <i class="iconfont"></i>
        <div class="page-box hide">
        </div>
      </div>
      <a class="next-btn fl">
        下一页
        <i class="iconfont"></i>
      </a>
    </div>
  </div>
  <div id="publicTool"></div>
  <script src="js/jquery.min.js"></script>
  <script src="js/public.js"></script>
  <script>
    var isClickPage
    var isIntPage =false;
		function getNewsList(page) {
			$.ajax({
				type: 'POST',
				url: ajaxUrlObj['GET_NEWS_LIST'],
				data: {
					page: page,
					rows: 4
				},
				success: function (rep) {
          if (typeof rep === 'string') {
						rep = JSON.parse(rep)
					}
					if (rep.code == 1) {
            $("#currentPage").html(page)
						var list = JSON.parse(rep.data).rows
						var str = ''
						if(!isIntPage){
							isIntPage =true;
							intPage(rep.total, 4)
						}
						for (var i = 0, l = list.length; i < l; i++) {
							str+='<a href="new_detail.html?id='+list[i].id+'" class="item-box"> <div class="fixed-pic-h"> <img src="'+host+list[i].informationImage+'"> </div> <div class="main-box"> <p class="title">'+list[i].informationTitle+'</p> <p class="date"> <i class="iconfont"></i> 发布时间： <span>'+list[i].createTime+'</span> </p> <p class="detail">'+list[i].informationDescribe+'</p> </div> </a>'
						}
						$("#div_news").html(str)
					}
				},
				error: function (error) {
					console.log(error)
				}
			});
    }
    function intPage(total, pageSize) {
			var page = total > 0 ? Math.ceil(total / pageSize) : 1
			var str = ''
			for(var i =1;i<=page;i++){
				str+='<a class="page-item">'+i+'</a>'
			}
			$(".page-box").html(str)
      $("#totalPage").html(page)
      $(".pre-btn").on("click",function(){
				var page = parseInt($("#currentPage").html())
				if (page <= 1) return
				getNewsList(page-1)
			})
			$(".next-btn").on("click",function(){
				var page = parseInt($("#currentPage").html())
				var all = $("#totalPage").html()
				if (page >= all) return
				getNewsList(page+1)
      })
      $(".page-item").on("click",function(){
        var page = parseInt($(this).html())
        getNewsList(page)
        $(".page-box").addClass("hide")
      })
		}
    $(window).ready(function(){
      getNewsList(1)
      $(".num-box").on("touchstart",function(e){
        if($(e.target).hasClass("num-box")){
          var $page = $(".page-box")
          isClickPage = true
          if($page.hasClass("hide")){
            $page.removeClass("hide")
          } else{
            $page.addClass("hide")
          }
        }
      })
      $(window).on("touchstart",function(e){
        if(!$(e.target).hasClass("page-item")&&!$(e.target).hasClass("page-box")){
          if(!isClickPage&&!$(".page-box").hasClass("hide")) {
            $(".page-box").addClass("hide")
          } else{
            isClickPage=false
          }
        }
      })
    })
  </script>
</body>

</html>